@extends('home.layout.base')
@section('description', $goodsInfo->goods_name . $goodsInfo->goods_brief . '欢迎来到360商城进行选购')
@section('description', $goodsInfo->goods_name)
@section('title', $goodsInfo->goods_name . '商品详情页')
@section('pluginstyle')
<script src="{{ asset('/dist/home/js/1102.js') }}"></script>
<link rel="stylesheet" href="{{ asset('/dist/home/css/store.css') }}" />
<style type="text/css">
    .attr_type{cursor: pointer;}
    .gdetail .gCon {
        margin: 0 auto 20px;
        text-align: left;
    }
</style>
<script>var _isindex = 0;</script> 
@endsection
@section('content')
<div class="gdetail"> 
    <div class="prodIntro"> 
        <div class="sPic"> 
            <dl class="picbox"> 
                <dt class="bigImg"> 
                <div style="display:none" id="winSelector"></div> 
                <img src="{{ $goodsInfo->goods_img }}" /> 
                </dt>
                <dd class="pic-selector" id="pic-selector"> 
                    <i class="left leftdisabled"></i> 
                    <div class="scroll"> 
                        <div class="scroll-items"> 
                            <a href="javascript:;" class="tinypic cur"><img src="{{ $goodsInfo->goods_thumb }}" /></a> 
                            @foreach($goodsAlbum as $goodsimg)
                            <a href="javascript:;" class="tinypic"><img src="{{ $goodsimg->album_image }}" /></a> 
                            @endforeach
                        </div>
                    </div> 
                    <i class="right rightdisabled"></i> 
                </dd>
            </dl>
        </div> 
        <div class="sInfo"> 
            <a name="sInfo"></a> 
            <div class="tr nobdr"> 
                <strong>{{ $goodsInfo->goods_name }}</strong> 
                <p class="slogan">{{ $goodsInfo->goods_brief }}</p>
            </div> 
            <div class="tr nobdr tr1" style="margin-top:10px"> 
                <div class="txt"> 
                    <strong class="nowprice"> <em>￥</em> {{ $goodsInfo->goods_price }} </strong>
                </div> 
                <div class="txt"> 
                    <span>分类</span> 
                    <ul class="glist" id="glist" data-monitor="goodsdetails_fenlei_click">
                        @foreach($goodsAttr as $attr)
                        <li> <a data-href="{{ url('/item', ['gid'=>$goodsInfo->id, 'aid'=>$attr->id]) }}" class="attr_type" title="{{ $attr->attr_type }}">{{ $attr->attr_type }}</a> </li>
                        @endforeach
                    </ul>
                </div> 
                <div class="txt"> 
                    <span style="margin-top:6px">数量</span> 
                    <div class="gcIpt"> 
                        <a href="javascript:void(0);" class="decrement disabled" data-num="-1">-</a>
                        <input type="text" class="goodsCount" value="1" />
                        <a href="javascript:void(0);" class="increment" data-num="1">+</a>
                    </div>
                </div> 
                <p class="cl mianze"> </p>
            </div> 
            <div class="tr nobdr btns"> 
                @if($goodsInfo->goods_num == 0)
                <a href="javascript:void(0);" class="gInfoBtn gInfoBtn-sellout">已售完</a> 
                @else
                <a href="javascript:void(0);" class="gInfoBtn gInfoBtn-addcart">
                    <span class="gInfoBtn-icon gInfoBtn-icon-cart"></span>加入购物车
                </a>
                @endif
                @if($islike)
                <a href="javascript:void(0);" class="favorite">
                    <span class="gInfoBtn-icon gInfoBtn-icon-heart"></span>已喜欢
                </a>
                @else
                <a href="javascript:void(0);" class="favorite nofav">
                    <span class="gInfoBtn-icon gInfoBtn-icon-heart"></span>喜欢
                </a>
                @endif
                <div style="clear:both"></div>
            </div> 
            <div class="tr nobdr"> 
                <div class="txt"> 
                    <span>保障</span> 
                    <ul class="guarantee"> 
                        <li class="bao"><i>包</i>满99元包邮 </li>
                        <li class="at7"><i>7</i>7天无理由退货 </li>
                        <li class="at15"><i>15</i>15天免费换货</li>
                    </ul>
                </div>
            </div>
        </div>
    </div> 
    <div class="c"> 
        <a name="gInfo"></a> 
        <div class="gTab"> 
            <div class="tab-bar"> 
                <div class="links"> 
                    <a href="javascript:void(0);" class="cur">产品详情</a> 
                    <a href="#gArg">规格参数</a> 
                    <a href="#gConsult">用户评价</a> 
                </div>
            </div>
        </div> 
        <div class="gCon"> 
            {!! $goodsInfo->goods_desc !!}
        </div> 
        <div class="gTit">
            规格参数
            <a name="gArg" style="display:block;margin-top:-120px;visibility:hidden"></a>
        </div> 
        <div class="gCon"> 
            <div class="gArg"></div> 
            {!! $goodsInfo->goods_spec !!}
        </div> 
        <div class="gTit"> 
            <a name="gConsult" style="display:block;position:relative;top:-100px;visibility:hidden"></a>商品评价 
        </div> 
        <div class="gCon comment box">
            <div class="box-header">
                <h3 class="box-title">
                    <input type="radio" name="comment" id="" checked />全部评价
                </h3>
            </div>
            <div class="box-body chat" id="chat-box">
                @foreach($comments as $comment)
                <div class="item">
                    <img src="{{ asset($comment->user->user_avartar) }}" alt="user image" class="online">
                    <p class="message">
                        <a href="#" class="name">
                            <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> {{ $comment->comment_time }}</small>
                            {{ $comment->user->user_nickname }}
                        </a>
                        {{ $comment->comment_content }}
                    </p>
                    @if($comment->reply_content)
                    <div class="attachment">
                        <h4>管理员回复:</h4>
                        <p class="filename">
                            {{ $comment->reply_content }}
                        </p>
                    </div>
                    @endif
                    <!-- /.attachment -->
                </div>
                @endforeach
            </div>
            <div class="box-footer">
                {!! $comments->render() !!}
            </div>
        </div> 
    </div>
</div> 
<div class="gInfoBar" id="gInfoBar"> 
    <div class="gTab"> 
        <div class="tab-bar"> 
            <div class="links"> 
                <a href="#gInfo" class="cur">产品详情</a> 
                <a href="#gArg">规格参数</a> 
                <a href="#gConsult">常见问题</a> 
                <a href="javascript:void(0);" class="gInfoBtn gInfoBtn-sellout">已售完</a> 
            </div>
        </div>
    </div>
</div> 
<div class="mask"></div> 
<div id="zoomView" style="display:none"> 
    <img width="960" height="960" src="{{ asset('/common/images/default.gif') }}" /> 
</div>
@endsection
@section('pluginscript')
<script>
    var curItemParam = {
        id:{{ $goodsInfo->id }}, 
        num:{{ $goodsInfo->goods_num }},
        goods_img: "{{ $goodsInfo->goods_img }}",
        aid:0,
        cid: {{ $goodsInfo->cate_id }},
        goods_price: {{ $goodsInfo->goods_price }}
    };
    
    $('.tcode-w .tcode').mouseenter(function() {
        $('.tcode-w').addClass('tcodeHover');
    }).mouseleave(function() {
        $('.tcode-w').removeClass('tcodeHover');
    })
    $('.tcode-d .tcode').mouseenter(function() {
        $('.tcode-d').addClass('tcodeHover');
    }).mouseleave(function() {
        $('.tcode-d').removeClass('tcodeHover');
    })

    // 延时加载
    $('.c img').lazyload({
        threshold: 200,
        placeholder: "{{ asset('/common/images/default.gif') }}"
    });

    // 点击加入购物车
   $('.gInfoBtn-addcart').click(function(){
       var data = {};
       // 获取购买的商品数量
       var cart_num = parseInt($('.goodsCount').val());
       if(!cart_num){
           qikoo.dialog.alert("购买数量错误!");
           $('.goodsCount').val(1);
           return false;
       }
       
       // 判断是否选择分类
       if(!curItemParam.attr_id){
           qikoo.dialog.alert("请选择一个分类!");
           return false;
       }
       
       // 获取其他信息
       data.goods_id = curItemParam.id;
       data.attr_id = curItemParam.attr_id;
       data.cart_num = cart_num;
       
       // 插入数据库
       $.get("{{ url('/shopcar/add') }}", data, function(msg){
           if(msg.status == '1'){
               qikoo.dialog.alert("加入购物车成功!");
               location.href = "/shopcar";
           } else {
               qikoo.dialog.alert(msg.info);
           }
       });
       return false;
   });
        
    // 获取商品属性的信息
    $(".attr_type").click(function(){
        var url = $(this).attr('data-href');
        var li = $(this).parent();
        li.siblings('li').removeClass('cur');
        li.addClass('cur');
        $.ajax({
            url: url,
            data:'',
            async:false,
            success:function(msg){
                if(msg.status == 1){
                    curItemParam.goods_price = msg.info.attr_price;
                    curItemParam.attr_id = msg.info.id;
                    curItemParam.attr_type = msg.info.attr_type;
                    $('.nowprice').html('<em> &yen; </em> ' + msg.info.attr_price);
                }
            },
            error:function(){
                alert('请稍后');
            }
        });
        return false;
    });
    // 点击收藏
    $('.nofav').click(function(){
        var url = "{{ url('/user/favorite') }}";
        var id = curItemParam.id;
        
        $.post(url,{id:id,_token:"{{ csrf_token() }}"},function(msg){
            if(msg.status == 1){
                var fav = $('.favorite');
                fav.removeClass('nofav');
                fav.attr('disabled', true);
            }
            qikoo.dialog.alert(msg.info);
        });
    });
    
    // 商品数量
    function goodsNum(value){
       // 判断是否为数字
       var that = $('.goodsCount');
       if(!/^[0-9]+$/.test(value)){
           that.val(0);
           return false;
       }
       
        // 判断是否超出库存
        if(value > curItemParam.num){
            qikoo.dialog.alert("购买数量超出库存!");
            that.val(curItemParam.num);
            $('.decrement').addClass('disabled');
            $('.decrement').attr('disabled', 'true');
            return false;
        }
        
        if(value < 0){
            $('.decrement').addClass('disabled');
            $('.decrement').attr('disabled', 'true');
            $('.goodsCount').val(0);
            return false;
        } else {
            $('.decrement').removeClass('disabled');
            $('.decrement').attr('disabled', 'false');
        }
    }
    
    // 获取商品数量
    function getGoodsNum(){
        $.get('{{ url("/item/getnum", [$goodsInfo->id]) }}','' , function(msg){
            if(msg.status == 1){
                curItemParam.num = msg.info;
            } else {
                qikoo.dialog.alert(msg.info);
            }
        });
    }
    
    // 点击增加，减少
    $('.increment').click(function(){
        var value = parseInt($('.goodsCount').val());
        $('.decrement').removeClass('disabled');
        $('.decrement').attr('disabled', 'false');
        getGoodsNum();
        value = value+1;
        $('.goodsCount').val(value);
        goodsNum(value);
    });
    
    $('.decrement').click(function(){
        var value = parseInt($('.goodsCount').val());
        if(value <= 0){
            $('.decrement').addClass('disabled');
            $('.decrement').attr('disabled', 'true');
            $('.goodsCount').val(0);
            return false;
        }
        $('.goodsCount').val(value - 1);
    });
    
    // 直接修改
    $('.goodsCount').blur(function(){
        var value = parseInt($('.goodsCount').val());
        getGoodsNum();
        goodsNum(value);
    });
</script> 
<script src="{{ asset('/dist/home/js/tinyslider.js') }}"></script>
<script src="{{ asset('/dist/home/js/qikoo_shop_item.js') }}"></script>
@endsection

